<template>
  <div class="container">
    <!-- 核心布局修改 -->
    <el-row
        class="card-wrap"
        justify="start"

        :gutter="16"
    >
      <el-col
          v-for="(item, index) in state.tableData"
          :key="index"
          :xs="24" :sm="12" :md="6" :lg="6"
          class="card-col"
      >
        <el-card
        :body-style="cardBodyStyle"
            class="card-item"
        >
          <router-link :to="`/client/activity/${item.id}`" class="nav-link">
            <img
                :src="item.cover"
                alt="活动封面"
                class="image"
            >
          </router-link>
          <div class="card-content">
            <p class="title">{{ item.name }}</p>
            <p class="date">
              {{ formatDate(item.startDate) }} ~
              {{ formatDate(item.endDate) }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
  <!-- 分页样式优化 -->
  <el-pagination
      background
      layout="prev, pager, next"
      :total="state.total"
      :current-page="state.currentPage"
      :page-size="state.pageSize"
      class="pagination"
      @current-change="handlePageChange"
  />
  <div class="footer">
    <div>社区养老服务整合平台</div>
  </div>
</template>

<script setup>
import {onMounted, reactive} from 'vue'
import {clientlistActivity} from '../../service/activityApi.js'

const state = reactive({
  tableData: [],
  total: 0,
  currentPage: 1,
  pageSize: 8
})

// 日期格式化方法
const formatDate = (dateStr) => {
  return dateStr?.split(' ')[0] || ''
}

// 分页处理
const handlePageChange = (val) => {
  state.currentPage = val
  getIndex()
}

const getIndex = async () => {
  try {
    const params = {
      pageNum: state.currentPage,
      pageSize: state.pageSize,
    }
    const response = await clientlistActivity(params)
    state.tableData = response.data.records || []
    state.total = response.data.total || 0
  } catch (error) {
    console.error('获取数据失败:', error)

  }
}

onMounted(() => {
  getIndex()
})
</script>

<style scoped>
/* 容器样式 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 卡片容器 */
.card-wrap {
  width: 100%;
}

/* 卡片列样式 */
.card-col {
  margin-bottom: 16px;
}

/* 卡片样式 */
.card-item {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 图片样式 */
.image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* 内容区域 */
.card-content {
  padding: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

/* 按钮容器 */
.button-container {
  padding: 16px;
  text-align: center;
}

/* 分页样式 */
.pagination {
  display: flex;
  margin-top: -10px;
  margin-left: 360px;
}

/* 弹窗中的描述容器 */
.description-container {
  margin-top: 16px;
}

/* 描述标签 */
.dialog-description-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

/* 描述内容 */
.dialog-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 描述内容滚动条 */
.dialog-description-scroll {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
.footer {
  font-size: 14px;
  height: 100px; /* 根据需要调整高度 */
  border-top: 1px solid #e9e9e9;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.beian-footer {
  bottom: 0;
  text-align: center;

a {
  color: #1D1D26;
  font-size: 14px;
  text-decoration-line: underline;

&:hover {
   color: #409EFF;
 }
}
}

</style>